<template>
	<view class="bgColor">
		<nacBer>
			<!-- view slot="left-dom">
				fasdg
			</view> -->
		</nacBer>
		<view class="bold">输入验证码</view>
		<view class="describe">验证码已发送至手机 13714101156</view>
		<view class="from_box">
			<u-code-input v-model="value6" hairline color="#007aff" borderColor="#007aff" mode="line"></u-code-input>
		</view>
		<view class="wrap">
			<u-code :keep-running="true" :seconds="seconds" @end="end" @start="start" ref="uCode" 
			@change="codeChange"></u-code>
			<view @tap="getCode">{{tips}}</view>
		</view>
		<view class="login_top_100">
			<u-button @click="nextCodeFun" type="primary">下一步</u-button>
		</view>
	</view>
</template>

<script>
	import nacBer from '@/components/navBar/index'
	export default {
		data() {
			return {
				userInfo: {
					name: ''
				},
				value6: '',
				tips: '',
				seconds: 60,
			}
		},
		components: {
			nacBer
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			nextCodeFun() {
				if (!this.value6) {
					uni.$u.toast('请输入验证码')
					return
				} else if (this.value6.length != 6) {
					uni.$u.toast('请输入6位验证码')
					return
				}
				uni.navigateTo({
					url:"/pages/register/setPassword/index"
				})
			},
			end() {
				uni.$u.toast('倒计时结束');
			},
			start() {
				// uni.$u.toast('倒计时开始');
			},
			getCode() {
				if(this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();
					}, 2000);
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.from_box {
		width: 100%;
		padding: 0 60rpx;
		box-sizing: border-box;
	}
	.login_top_100 {
		border-radius: 100rpx;
		width: 550rpx;
		overflow: hidden;
		margin: auto;
		margin-top: 20%;
	}
	.bold {
		font-size: 50rpx;
		font-weight: bold;
		margin: 50rpx 0 30rpx 50rpx;
	}
	.describe {
		margin-left: 50rpx;
		margin-bottom: 50rpx;
	}
	.ico_right_10 {
		margin-right: 30rpx;
	}
	.wrap {
		padding: 50rpx;
		padding-top: 30rpx;
		font-size: 28rpx;
		color: orange;
		// width: 300rpx;
		// background-color: #fff;
	}
</style>